<template>
	<view v-if="info">
		<f-navbar title=" " fontColor="#303133" transparentTitleColor="#fff" bgColor="#fff" :scrollTop="scrollTop"
				  navbarType='5'></f-navbar>
		<view class="u-demo-block">
			<u-swiper :list="images" keyName="image" @change="(e) => (currentNum = e.current)" height="912rpx"
					  :autoplay="false" indicatorStyle="right: 32rpx;bottom: 140rpx;">
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ images.length }}</text>
				</view>
			</u-swiper>

			<!-- 	<view class="backBox"  :style="'top: '+$safeT+'px'">
                    <view class="btn cancel" v-if="info.collectStatus > 0" @click="collect(info,0)">取消关注</view>
                    <view class="btn" v-else @click="collect(info,1)">+ 关注</view>
                </view> -->

			<view class="statusBox" v-if="info.is_rest == 1">
				<image src="/static/pages_technician/status.png" mode=""></image>
				<text class="text1">忙碌中</text>
			</view>
			<view class="statusBox" v-else>
				<image src="/static/pages_technician/status.png" mode=""></image>
				<text class="text1">可服务</text>
				<text>最早可约 {{info.timeInfo.starttime | date('mm-dd hh:MM')}}</text>
			</view>
			<view class="swiperBottom" @click="cert">
				<view class="item">
					<image src="/static/pages_technician/icon1.png" mode=""></image>
					<text>安心服务</text>
				</view>
				<view class="item">
					<image src="/static/pages_technician/icon2.png" mode=""></image>
					<text>实名认证</text>
				</view>
				<view class="item">
					<image src="/static/pages_technician/icon3.png" mode=""></image>
					<text>健康保障</text>
				</view>
				<view class="item">
					<image src="/static/pages_technician/icon4.png" mode=""></image>
					<text>爽约包退</text>
				</view>
			</view>
		</view>
		<view class="info">
			<view class="" style="background-color: #00CE9B; border-radius: 20rpx;">
				<view class="box1">
					<view class="l">
						<view class="name">
							<view class="namel">{{info.name}}</view>
							<view class="collectr" v-if="info.collectStatus > 0" @click="collect(info,0)">取消关注</view>
							<view class="collectr" v-else @click="collect(info,1)">关注</view>
							<view class="bofang" @click="bfmusic" v-if="showmusic">

								<image src="../../static/sy.png" class="bofang_img" mode=""></image>
							</view>
						</view>
						<view class="">{{info.gender == 0 ? '男' : '女'}}· 距您 {{info.juli}}km</view>
					</view>
					
					<view class="r" v-if="info.shopnames"
						  @click="$goTo('/pages_technician/shopdetail/shopdetail?store_id=' + info.store_id)">
						<image src="/static/shop.png" mode=""></image>
						<text>{{info.shopnames.substr(0,4)}}</text>
					</view>
					
				</view>
				<view class="tips">
					<view class="tips_item" v-if="info.nation">
						{{info.nation}}
					</view>
					<view class="tips_item" v-if="info.year">
						{{info.year}}
					</view>
					<view class="tips_item" v-if="info.weight">
						{{info.weight}}
					</view>
					<view class="tips_item" v-if="info.edu">
						{{info.edu}}
					</view>
					<view class="tips_item" v-if="info.height">
						{{info.height}}
					</view>
					<view class="tips_item" v-if="info.sign">
						{{info.sign}}
					</view>
				</view>
			</view>
			
			<view class="box2">
				<view class="box">
					<text class="num">{{info.collectNum}}</text>
					<text>关注人数</text>
				</view>
				<view class="box">
					<text class="num">{{info.sale}}</text>
					<text>累计接单</text>
				</view>
				<view class="box">
					<text class="num red">{{info.score > 0 ? info.score : '5.0'}}</text>
					<text>服务评分</text>
				</view>
			</view>
			<view class="box3" v-if="info.intro">
				{{info.intro}}
			</view>
		</view>
		<view class="trends" v-if="discover.length > 0">
			<view class="title">
				<view class="label">技术动态</view>
				<view class="all" @click="$goTo('/pages/discover/center?user_id='+info.user_id+'&id='+info.id)">
					<text>查看全部</text>
					<image src="/static/pages_technician/right_grey.png" mode=""></image>
				</view>
			</view>
			<view class="jss">
				<image v-for="(item,index) in discover" v-if="index < 4" class="js" :src="$oss(item.coverimage)"
					   mode=""></image>
			</view>
		</view>
		<view class="recommendBox">
			<view class="title">
				<view class="l">推荐套餐</view>
			</view>
			<view class="items">
				<view class="item" v-for="item in info.cateInfo" @click="toDetails(item)">
					<image class="fengmian" :src="$oss(item.image)" mode=""></image>
					<view class="right">
						<view class="name">{{item.name}}</view>
						<view class="gongneng">
							<view class="">{{item.intro}}</view>
						</view>
						<view class="price">
							<view class="vipPrice">
								<image src="../../static/vipBg.png" class="vip" mode=""></image>
								<view class="word">¥ {{item.price}}</view>
							</view>
							<view class="reservation_btn">立即预约</view>
						</view>
						<view class="naozhong">
							<image src="/static/naozhong.png" mode="widthFix"></image>
							<text>{{item.costmin}}分钟</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="evaluate">
			<view class="title">用户真实评价</view>
			<image class="icon_star" src="../../static/pages_technician/icon_star.png" mode=""></image>
			<view class="box1">
				<view class="box2" v-for="(item,index) of comment" v-if="index < 3">
					<view class="line1">
						<text>匿名用户</text>
						<view class="stars">
							<image v-for="i in item.star" src="../../static/pages_technician/starA.png" mode=""></image>
							<image v-for="i in (5 - item.star)" src="../../static/pages_technician/star.png" mode="">
							</image>
						</view>
					</view>
					<view class="line2">{{item.createtime | date}}</view>
					<view class="line3">{{item.content}}</view>
					<view class="line4">
						<view class="btn" v-for="(val) of item.label_content">{{val}}</view>
					</view>
				</view>
				<view class="box3" @click="allEvaluate" v-if="comment.length>0">
					<text>查看所有评价</text>
					<image src="../../static/pages_technician/right_grey.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="flex-cneter ensureBox" v-if="ensure_image">
			<image :src="$oss(ensure_image)" class="ensure_image" mode="widthFix"></image>
		</view>
		<image src="../../static/pages_technician/gift.png" class="gift" mode="" @click="show = true"></image>
		<!-- <image class="bottomImg" src="../../static/pages_technician/bottomImg.png" mode=""></image> -->
		<u-popup :show="show" @close="show = false">
			<view class="popbox">
				<view class="popbox_top">
					<view class="">礼物</view>
					<view class="popbox_top_left flex">
						<view class="one" @click="$authTo('/pages_my/modou/modou')">充值</view>
						<view class="two" @click="givegift">赠送</view>
					</view>
				</view>
			</view>

			<view class="classify">
				<swiper class="swiper-menu" indicator-dots circular>
					<swiper-item v-for="(item,index) in giftlist" :key="index">
						<view class="view-menu">
							<view class="view-item" :class="current==i.id?'newstyle':''" v-for="(i,index) in item"
								  :key="i.id" @click="choosegif(i.id)">
								<image  :src="$oss(i.image)" class="icon u-m-b-10" mode="aspectFill"></image>
								<view class=" u-m-t-20 u-m-t-20" style="font-size: 26rpx;">{{i.name}}</view>
								<view class="" style="color: #999;font-size: 22rpx;">{{i.num}}魔豆</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import fNavbar from '@/uni_modules/f-navbar/components/f-navbar/f-navbar.vue';
	import {
		mapActions,
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				current: 0,
				tabcurent: 0,
				show: false,
				commontypeid: 0,
				currentNum: 0,
				commontype: ['全部评价', '技师专业', '服务到位', '体验很棒', '手法专业', '按时到达', '性价比高', '礼貌热情'],
				location: '',
				id: '',
				showmusic:false,
				images: [],
				info: '',
				comment: [],
				discover: [],
				scrollTop: 0,
				ensure_image: '',
				giftlist: [],
				current: 0,
				music:'',
				is_music:0
			};
		},
		onLoad(option) {
			this.ensure_image = uni.getStorageSync('project').ensure_image
			this.id = option.id
			this.getList()
			this.gift()
			this.music = uni.createInnerAudioContext();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			choosegif(index) {
				this.current = index
				console.log(this.current);
			},
			//查看技师位置
			tomap() {
				this.$goTo('/pages_technician/maps/maps?info=' + JSON.stringify(this.info))
			},
			//赠送礼物
			givegift() {
				if (this.current <= 0) {
					this.$toast('请先选择礼物~')
					return
				}
				this.$api.post('/givegift', {
					id: this.current,
					skill_user_id: this.info.user_id
				}).then(res => {
					if (res.code == 1) {
						this.$toast(res.msg)
						this.show = false
					}
				})
			},
			
			//获取礼物
			gift() {
				this.$api.post('/gift', {}).then(res => {
					this.giftlist = res.data
					const list = res.data
					this.giftlist = [];
					for (var i = 0; i < list.length; i++) {
						if (i % 8 == 0) {
							this.giftlist.push([]);
						}
						this.giftlist[this.giftlist.length - 1].push(list[i])
					}
				})
			},
			cert() {
				this.$goTo('/pages_technician/jsDetails/cert?card=' + this.info.card + '&skill_image=' + this.info.skill_image + '&health_image=' + this.info.health_image + '&business_image=' + this.info.business_image)
			},
			// 收藏
			collect(data, index) {
				this.$api.post('/collect', {
					service_id: data.user_id,
					status: index
				}).then(res => {
					if (res.code == 1) {
						if (index == 0) {
							data.collectStatus = 0
							data.collectNum--
						} else {
							data.collectStatus = 1
							data.collectNum++
						}
					}
				}).catch((res) => {

				})
			},
			...mapActions(['getLocation']),
			async getList() {
				if (!this.$store.state.location) {
					await this.getLocation()
				}
				this.location = JSON.parse(JSON.stringify(this.$store.state.location))
				if (this.finish) {
					return
				}
				this.$api.post('/skillinfo', {
					...this.location,
					// city: '郑州市',
					// lat: '34.79977',
					// lng: '113.66072',
					page: this.page,
					id: this.id,
				}).then(res => {
					res.data.comment.forEach(item => {
						item.label_content = item.label_content ? item.label_content.split(',') : []
					})

					this.images = res.data.images.map((value) => {
						return {
							image: this.$oss(value)
						}
					})
					if(res.data.audio){
						this.music.src = 'https://yidian.hnjuanji.com' + res.data.audio
						this.showmusic = true
					}
					console.log(this.music);
					this.comment = this.comment.concat(res.data.comment)

					if (res.data.comment.length === 0) {
						this.finish = true
					}

					this.info = res.data
					this.getDiscover()
				})
			},
			bfmusic(){
				var that = this
				that.is_music=!that.is_music
				if(that.is_music==1){
					that.music.play()
					that.music.onPlay(() => {
					  console.log('开始播放');
					});
				}else{
					that.music.stop()
					that.music.onStop(()=>{
						console.log('暂停');
					})
				}
				that.music.onError((res) => {
				  console.log(res.errMsg);
				  console.log(res.errCode);
				});
			},
			getDiscover() {
				this.$api.post('/servicelist', {
					page: '1',
					id: this.info.user_id,
				}).then(res => {
					if (res.code == 1) {
						this.discover = res.data
					}
				}).catch((res) => {

				})
			},
			back() {
				uni.navigateBack()
			},
			toDetails(item) {
				uni.navigateTo({
					url: '/pages/reservation/reservation?cate_id=' + item.id + '&id=' + this.info.user_id
				})
			},
			expand() {

			},
			allEvaluate() {
				uni.navigateTo({
					url: '/pages_technician/allEvaluate/allEvaluate?id=' + this.id
				})
			},
			changetype(index) {
				this.commontypeid = index
			}
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background: #F7F7FA;
		padding-bottom: 30rpx;
	}

	.ensureBox {
		margin: 30rpx;
	}

	.gift {
		position: fixed;
		right: 100rpx;
		bottom: 200rpx;
		width: 160rpx;
		height: 160rpx;
	}

	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #ffffff;
			font-size: 12px;
		}
	}

	.u-demo-block {
		position: relative;

		.backBox {
			width: 750rpx;
			position: absolute;
			top: 108rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 32rpx;
			box-sizing: border-box;
			/* #ifdef MP */
			padding-right: 200rpx;
			/* #endif */

			.btn {
				width: 130rpx;
				height: 56rpx;
				background: #00CE9B;
				border-radius: 28rpx;
				text-align: center;
				line-height: 56rpx;
				font-size: 24rpx;
				color: #FFFFFF;
			}

			.cancel {
				background: #999;
			}

			image {
				width: 64rpx;
				height: 64rpx;
			}
		}

		.statusBox {
			height: 75rpx;
			background: rgba(255, 255, 255, 0.9);
			border-radius: 20rpx;
			border: 2rpx solid #FFFFFF;
			position: absolute;
			bottom: 128rpx;
			left: 32rpx;
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #1C274C;
			padding: 0 32rpx;
			box-sizing: border-box;

			.text1 {
				color: #00CE9B;
				margin-right: 20rpx;
			}

			image {
				width: 24rpx;
				height: 24rpx;
				margin-right: 10rpx;
			}
		}

		.swiperBottom {
			width: 750rpx;
			height: 94rpx;
			background: rgba(0, 0, 0, 0.35);
			backdrop-filter: blur(10px);
			position: absolute;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 32rpx;
			box-sizing: border-box;

			.item {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #FFFFFF;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
			}
		}
	}

	.info {
		width: 686rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 30rpx auto 0;
		padding-bottom: 32rpx;

		.box1 {
			width: 686rpx;
			height: 181rpx;
			background: #00CE9B;
			border-radius: 20rpx;
			padding: 40rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #FFFFFF;

			.l {
				font-size: 24rpx;
				letter-spacing: 2rpx;

				.name {

					margin-bottom: 20rpx;
					display: flex;
					align-items: center;

					.namel {
						font-weight: bold;
						font-size: 36rpx;
					}

					.collectr {
						background: rgba(255, 255, 255, 0.85);
						height: 40rpx;
						padding: 0 10rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 20rpx;
						margin-left: 20rpx;
						color: #00CE9B;
						font-size: 22rpx;
					}
					.bofang{
						margin-left: 20rpx;
						border-radius: 30rpx;
						background-color: #fff;
						padding: 5rpx 30rpx;
						box-sizing: border-box;
						text-align: center;
						.bofang_img{
							width: 16rpx;
							height: 21rpx;
						}
					}
				}
			}

			.r {
				width: 103rpx;
				height: 103rpx;
				background: rgba(255, 255, 255, 0.85);
				border-radius: 20rpx;
				border: 2rpx solid #FFFFFF;
				font-size: 20rpx;
				color: #1C274C;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-bottom: 8rpx;
				}
			}
		}
		.tips{
			display: flex;
			padding: 0 40rpx 20rpx;
			.tips_item{
				color: #fff;
				font-size: 24rpx;
				padding: 8rpx 14rpx;
				background: rgba(255,255,255,0.3);
				border-radius: 14rpx;
				&:nth-child(n+2){
					margin-left: 20rpx;
				}
			}
		}
		.box2 {
			width: 686rpx;
			border-radius: 20rpx;
			margin: 40rpx auto;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.box {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 24rpx;
				color: #666666;

				.num {
					font-size: 36rpx;
					font-weight: 900;
					color: #1c274c;
				}

				.red {
					color: #e91919;
				}
			}
		}

		.box3 {
			width: 622rpx;
			height: 120rpx;
			background: #F6F7FB;
			border-radius: 20rpx;
			margin: 0 auto;
			font-size: 24rpx;
			color: #727891;
			line-height: 40rpx;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
		}
	}

	.trends {
		width: 686rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 32rpx;
		box-sizing: border-box;
		margin: 0 auto;

		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.label {
				font-size: 30rpx;
				color: #1C274C;
				font-weight: bold;
			}

			.all {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #ADB1BF;

				image {
					margin-left: 12rpx;
					width: 8rpx;
					height: 14rpx;
				}
			}
		}

		.jss {
			display: flex;
			align-items: center;
			// justify-content: space-between;
			margin-top: 22rpx;

			.js {
				width: 136rpx;
				height: 136rpx;
				margin-right: 20rpx;
				border-radius: 20rpx;
			}
		}
	}

	.recommendBox {
		margin-top: 0rpx;
		padding: 32rpx;
		box-sizing: border-box;
		// background-color: #fff;
		border-radius: 20rpx;

		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.l {
				color: #1c274c;
				font-weight: bold;
				font-size: 30rpx;
			}
		}

		.items {
			padding-bottom: 30rpx;

			.item {
				width: 686rpx;
				padding: 30rpx 32rpx;
				box-sizing: border-box;
				background: #FFFFFF;
				border-radius: 20rpx;
				display: flex;
				margin: 30rpx auto 0;
				position: relative;

				.fengmian {
					width: 194rpx;
					height: 160rpx;
					border-radius: 20rpx;
					margin-right: 20rpx;
				}

				.right {
					.name {
						font-size: 30rpx;
						font-weight: 600;
						color: #1C274C;
					}

					.gongneng {
						display: flex;
						align-items: center;
						margin: 15rpx 0 20rpx;

						view {
							padding: 0 10rpx;
							height: 40rpx;
							border-radius: 10rpx;
							opacity: 0.4;
							border: 1rpx solid #8D93A5;
							font-size: 20rpx;
							color: #1C274C;
							line-height: 40rpx;
							text-align: center;
							margin-right: 10rpx;
							display: -webkit-box; /* 将容器作为弹性盒子 */
							-webkit-box-orient: vertical; /* 垂直排列盒子内容 */
							-webkit-line-clamp: 1; /* 设置最大行数为1行 */
							overflow: hidden; /* 隐藏溢出的内容 */
							text-overflow: ellipsis; /* 使用省略号代替溢出的内容 */
						}
					}

					.price {
						display: flex;
						align-items: center;
						width: 400rpx;
						position: relative;

						.money {
							margin-right: 15rpx;

							text:first-child {
								font-size: 24rpx;
								color: #E91919;
							}

							text:last-child {
								font-size: 28rpx;
								color: #E91919;
								font-weight: 600;
							}
						}

						.vipPrice {
							width: 127rpx;
							height: 35rpx;
							// background: url(/static/vipBg.png) no-repeat;
							// background-size: contain;
							font-size: 22rpx;
							font-weight: 900;
							color: #292439;
							position: relative;
							margin-right: 50rpx;

							.vip {
								position: absolute;
								left: 0;
								top: 0;
								width: 100%;
								height: 100%;
							}

							.word {
								height: 100%;
								width: 100%;
								display: flex;
								align-items: center;
								justify-content: flex-end;
								padding-right: 10rpx;
								box-sizing: border-box;
								position: relative;
								z-index: 10;
							}
						}

						.reservation_btn {
							padding: 10rpx 30rpx;
							background: #00CE9B;
							border-radius: 28rpx;
							font-size: 24rpx;
							color: #FFFFFF;
							position: absolute;
							right: 0;
						}
					}

					.naozhong {
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 22rpx;
						color: #00CE9B;
						width: 142rpx;
						height: 52rpx;
						background: rgba(0, 206, 155, .1);
						border-radius: 100rpx 0rpx 0rpx 100rpx;
						position: absolute;
						right: 0;
						top: 30rpx;

						image {
							width: 24rpx;
							margin-right: 10rpx;
						}
					}
				}
			}
		}

		.zhankai {
			font-size: 24rpx;
			color: #ADB1BF;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 50rpx;

			image {
				width: 14rpx;
				height: 9rpx;
				margin-left: 12rpx;
			}
		}
	}

	.evaluate {
		width: 686rpx;
		background: #FE6051;
		border-radius: 20rpx;
		margin: 30rpx auto;
		padding-top: 32rpx;
		box-sizing: border-box;
		position: relative;

		.title {
			font-size: 30rpx;
			color: #FFFFFF;
			margin-left: 32rpx;
			font-weight: bold;
		}

		.icon_star {
			width: 113rpx;
			height: 95rpx;
			position: absolute;
			top: 20rpx;
			right: 30rpx;
		}

		.box1 {
			width: 686rpx;
			background: #fff;
			border-radius: 20rpx;
			margin-top: 30rpx;
			padding: 32rpx;
			box-sizing: border-box;

			.btns {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.btn {
					width: 129rpx;
					height: 54rpx;
					background: #F6F7FB;
					border-radius: 20rpx;
					font-size: 24rpx;
					color: #727891;
					line-height: 54rpx;
					text-align: center;
					margin-top: 20rpx;
				}

				.act {
					background: #FE6051;
					color: #FFFFFF;
				}
			}

			.box2 {
				margin-top: 40rpx;
				padding-bottom: 30rpx;
				border-bottom: 1rpx solid #EBEBEB;

				.line1 {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 28rpx;
					font-weight: 600;
					color: #1C274C;

					.stars {
						display: flex;
						align-items: center;

						image {
							width: 24rpx;
							height: 24rpx;
							margin-left: 10rpx;
						}
					}
				}

				.line2 {
					font-size: 20rpx;
					color: #BABDC9;
					margin: 10rpx 0 15rpx;
				}

				.line3 {
					font-size: 26rpx;
					color: #1C274C;
					margin-bottom: 22rpx;
				}

				.line4 {
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					.btn {
						padding: 0 10rpx;
						height: 54rpx;
						background: #F6F7FB;
						border-radius: 20rpx;
						font-size: 24rpx;
						color: #727891;
						line-height: 54rpx;
						text-align: center;
						margin-right: 20rpx;
						margin-top: 20rpx;
					}
				}
			}

			.box3 {
				font-size: 24rpx;
				color: #ADB1BF;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 50rpx;
				margin-top: 30rpx;

				image {
					width: 9rpx;
					height: 14rpx;
					margin-left: 12rpx;
				}
			}
		}
	}

	.bottomImg {
		display: block;
		width: 137rpx;
		height: 62rpx;
		margin: 20rpx auto;
	}

	.popbox {
		padding: 30rpx;

		.popbox_top {
			display: flex;
			justify-content: space-between;
		}

		.popbox_top_left {
			font-size: 26rpx;

			.one {
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				opacity: 1;
				border: 1rpx solid #00CE9B;
				padding: 10rpx 20rpx;
				color: #00CE9B;
				margin-right: 20rpx;
			}

			.two {
				background: #00CE9B;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				opacity: 1;
				color: #fff;
				padding: 10rpx 20rpx;
			}
		}

	}

	.classify {
		width: 95%;
		margin: auto;
		background-color: #FFF;
		border-radius: 20rpx;
		margin-top: 30rpx;

		.swiper-menu {
			margin-top: 20rpx;
			height: 450rpx;

			//设置轮播的指示点大小
			/deep/ .uni-swiper-dots {
				// 指示点整个区域的位置
				// top: 290rpx;
			}

			/deep/ .uni-swiper-dot {
				// 指示点元素默认样式
				width: 52upx !important;
				height: 10upx !important;
				background: #e4e4e4 !important;
				border-radius: 4rpx;
			}

			/deep/ .uni-swiper-dot-active {
				// 指示点元素激活（当前选中）状态样式
				width: 52upx !important;
				height: 10upx !important;
				background: #4a9aff !important;
				border-radius: 4rpx;
			}
		}

		.view-menu {
			width: 100%;
			// padding: 0rpx 30rpx;
			display: grid;
			grid-template-columns: repeat(4, 25%);

			.view-item {
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 13rpx;

				&:nth-child(4n) {
					margin-right: 0;
				}
				.icon{
					width: 80rpx;
					height: 80rpx;
				}

				image {
					// margin-top: 42rpx;
					width: 106rpx;
					height: 106rpx;
				}

				.text-name {
					font-size: 24rpx;
					font-weight: 500;
					// margin-top: 20rpx;
					font-weight: bold;
					color: #666666;
				}
			}

			.newstyle {
				border: 3rpx solid #00CE9B;
				padding: 10rpx;
				border-radius: 20rpx;
				background: rgba(0, 206, 155, 0.06);
			}
		}
	}
</style>
